<script setup lang="ts">
const images = ref([]);
</script>

<template>
  <div>
    <h1 class="title">3.v-lazy</h1>
    <div class="btns">
      <button class="btn" @click="images = []">加载</button>
      <button
        class="btn"
        @click="
          images = [
            'http://dummyimage.com/250x250',
            'http://dummyimage.com/250x250',
            'http://dummyimage.com/abc'
          ]
        "
      >
        加载完成
      </button>
    </div>
    <div class="module">
      图片懒加载指令
      <ul>
        <li v-for="(item, idx) in images" :key="idx">
          <img v-lazy="item" class="image-item" />
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped lang="scss"></style>

<route>
{
  meta: {
    cache: true
  }
}
</route>
